<template>
  <div>
    <h1>App</h1>
    <p>{{ count }}</p>
    <button @click="count++">修改count</button>

    <p>{{ person }}</p>
    <button @click="changePerson">修改person</button>

  </div>
</template>

<script lang="ts">
 import { defineComponent } from "vue"
  export default  defineComponent({
    name:'App',
    });
</script>

<script setup lang="ts">
import { ref , watch } from "vue";
// 对于ref保存的是一个基本类型值的话,我们直接监听当前ref对象即可得到值的改变

const count = ref(0)
watch(count,(newVal,oldVal)=>{
  console.log(newVal,oldVal);
})
// 对于ref保存的是一对象
const person = ref({
  name: "胖虎",
  age: 18,
  score: {
    ch: 100,
    math: 90,
  },
})

const changePerson = () => {
    // person.value = {
    // name:"静香",
    // age:15,
    // }
 person.value.name = "静香"
 person.value.age = 15
// person.value.score.ch = 120;
person.value.score = {ch:120,math:100};
};

// 如果ref对象保存的是一个对象类型，我们监听ref对象，可以监听到对象的替换(可以监听到ref对象的value的替换)

// 总结：如果监听ref对象，则只能监听ref对象的value属性的替换，如果想要深层次的监听请使用deep深度监听
// watch(person,(newVal,oldVal)=>{
//   console.log(newVal,oldVal);
  
// },
// {
//   deep:true,
// });


// 总结：watch监听ref对象的value属性(值是代理对象),只能监听value属性内部的修改(默认深度监听),无法监听value属性的值被替换
// watch(person.value,(newVal,oldVal)=>{
//   console.log(newVal,oldVal,"person.value");
// });


//如果深层次的监听一个对象内部的属性(是对象类型),监听的是这个对象内部被修改(默认深度监听),不能监听当前的属性值被替换
// watch(person.value.score,(newVal,oldVal)=>{
//   console.log(newVal,oldVal,"person.value.score");
  
// });

//总结:监听一个属性值被替换,watch的第一个参数可以使用函数的方式
// watch(
//   ()=>person.value.age,
//   (newVal,oldVal)=>{
//     console.log(newVal, oldVal);
//   }
// )

watch(
  () => person.value.score,
  (newVal, oldVal) => {
    console.log(newVal, oldVal);
  },
  {
    deep: true,
  }
);

//watch监听多个
//  watch([
//   () => person.value.age,
//   () => person.value.name
//        ], (newVal, oldVal) => {
//   console.log(newVal, oldVal);
// }); 
</script>

<style lang="less" scoped>
  
</style>
